@import "ui-variables";

.wavy_border(@color) {
  background-image:
    linear-gradient(45deg, transparent 65%, @color 80%, transparent 90%),
    linear-gradient(135deg, transparent 5%, @color 15%, transparent 25%),
    linear-gradient(135deg, transparent 45%, @color 55%, transparent 65%),
    linear-gradient(45deg, transparent 25%, @color 35%, transparent 50%);
  background-size: 8px 2px;
  background-repeat: repeat-x;
  background-position: left bottom;
}

#linter-tooltip {
  margin-top: 3px;

  .message-with-severity(@color) {
    color: @text-color;
    background-color: @inset-panel-background-color;

    border-left: 8px solid @color;
    border-right: 1px solid fade(contrast(@inset-panel-background-color), 5%);
    &:first-child {
      border-top: 1px solid fade(contrast(@inset-panel-background-color), 5%);
    }
    &:last-child {
      border-bottom: 1px solid fade(contrast(@inset-panel-background-color), 5%);
    }

    &:last-child::before {
      border-color: transparent transparent @color @color;
    }

    a {
      color: @text-color;
    }
  }

  linter-message {
    &.error {
      .message-with-severity(@text-color-error);
    }
    &.warning {
      .message-with-severity(@text-color-warning);
    }
    &.info {
      .message-with-severity(@text-color-info);
      &::before {
        opacity: 0;
      }
    }

    // Arrow pointer
    &:last-child::before {
      content: "";
      position: absolute;
      top: -4px;
      left: 0;
      border: 4px solid;
    }
    a {
      font-weight: bold;
    }
    p {
      margin-bottom: 0;
    }
    .linter-line {
      display: block;
    }
    .badge {
      color: @text-color-highlight;
    }
  }
}

linter-message {
  display: block;
  padding: 2px 5px;
}

.icon.linter-icon::before {
  font-size: 14px;
}

atom-text-editor.editor .linter-row {
  /* Take up the full allowed width */
  left: 0;
  right: 0;
  /* Align the linter dot in the middle */
  display: flex;
  align-items: center;
  justify-content: center;
}

atom-text-editor.editor .linter-highlight, .linter-highlight {
  .error_type(@color, @priority) {
    .region {
      .wavy_border(@color);
    }
    &.linter-gutter {
      color: @color;
      z-index: @priority;
    }
  }
  &.linter-info {
    .error_type(@background-color-info, -1);
  }
  &.linter-warning {
    .error_type(@background-color-warning, 0);
  }
  &.linter-error {
    .error_type(@background-color-error, 1);
  }
}
.tree-view {
  span.name {
    position: relative;
  }
  .error_type(@color) {
    top: 0;
    left: 1.8rem;
    width: calc(~"100% - 1.8rem");
    height: 100%;
    position: absolute;
    .wavy_border(@color);
  }
  .linter-info {
    .error_type(@background-color-info);
  }
  .linter-warning {
    .error_type(@background-color-warning);
  }
  .linter-error {
    .error_type(@background-color-error);
  }
}
.linter-gutter.icon::before {
  width: 100%;
  font-size: 1em;
}

.linter-status-count {
  a {
    padding: 2px;
  }
  span.icon::before {
    font-size: 12px;
    vertical-align: middle;
  }
  &.hide-config, &.hide-pane {
    display: none;
  }
}
.linter-cursor-line {
  width: 100%;
  padding-left: 0;
}

linter-decoration {
  pointer-events: none;
}
